<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>兑换码</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/exchange.css"/>
		<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="exchangeWeb">
			<div class="content">
				<form action="" method="post">
					<p>请输入兑换码</p>
					<input type="text" id="" value="" autofocus maxlength="10"/>
				</form>
				<button>确认</button>
			</div>
			<div class="back">
				<a href="index.html"><img src="img/home.png"/></a>
			</div>
			
			<div class="success">
				<div class="text">
					<div class="close">
						<img src="img/index/close.png"/>
					</div>
					<p>兑换成功 !</p>
				</div>
			</div>
			<div class="fail">
				<div class="text">
					<div class="close">
						<img src="img/index/close.png"/>
					</div>
					<div class="middle">
						<p>兑换失败 !</p>
						<button>重新输入</button>
					</div>
				</div>
			</div>
		</div>
		
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var value;
			$(".content input").on("input",function(){
				value=this.value;
			})
			
			$(".content button").on("click",function(){
				if(value== "12345678"){
					$(".success").css("display","block");
				}else{
					$(".fail").css("display","block");
				}
			})
			
			$(".close").on("click",function(){
				$(".close").parent().parent().css("display","none");
			})
			
			$(".fail .text .middle button").on("click",function(){
				$(".exchangeWeb .fail").css("display","none");
			})
			
		</script>
	</body>
</html>
